import 'package:flutter/material.dart';

import '../constants.dart' show AppColors, AppStyles, Constants, Routes;
import '../model/conversation.dart'
    show Conversation, Device, ConversationPageData;
import '../conversation/conversation_detail_args.dart';

/**每一行的会话列表项 */
class _ConversationItem extends StatelessWidget {
  final Conversation conversation;

  const _ConversationItem({Key key, this.conversation})
      : assert(conversation != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    // 根据图片的获取方式初始化头像组件
    Widget avatar;
    if (conversation.isAvatarFromNet()) {
      // 网络图片
      avatar = Image.network(
        conversation.avatar,
        fit: BoxFit.cover,
      );
    } else {
      // 本地图片
      avatar = Image.asset(
        conversation.avatar,
        fit: BoxFit.cover,
      );
    }

    Widget avatarContainer;
    if (conversation.unreadMsgCount > 0) {
      // 未读消息角标
      Widget unreadMsgCountText = Container(
        width: Constants.UnReadMsgNotifyDotSize,
        height: Constants.UnReadMsgNotifyDotSize,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius:
              BorderRadius.circular(Constants.UnReadMsgNotifyDotSize / 2.0),
          color: Color(AppColors.NotifyDotGg),
        ),
        child: Text(
          conversation.unreadMsgCount.toString(),
          style: AppStyles.UnreadMsgCountDotStyle,
        ),
      );

      // Stack 叠加现实的View
      avatarContainer = Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          // 头像组件
          Center(
            child: Container(
              // 头像框大小
              width: Constants.ConversationAvatarSize,
              height: Constants.ConversationAvatarSize,
              child: ClipRRect(
                // 头像框圆角
                borderRadius: BorderRadius.circular(6),
                // 头像url
                child: avatar,
              ),
            ),
          ),
          Positioned(
            // 角标
            child: unreadMsgCountText,
            right: -6.0,
            top: -6.0,
          ),
        ],
      );
    } else {
      avatarContainer = // 头像组件
          Center(
        child: Container(
          // 头像框大小
          width: Constants.ConversationAvatarSize,
          height: Constants.ConversationAvatarSize,
          child: ClipRRect(
            // 头像框圆角
            borderRadius: BorderRadius.circular(6),
            // 头像url
            child: avatar,
          ),
        ),
      );
    }

    /**勿扰模式图标 */
    Widget muteIcon = Icon(
      const IconData(
        0xe60c,
        fontFamily: Constants.IconFontFamily,
      ),
      color: Color(
        AppColors.ConversationMuteIcon,
      ),
      size: Constants.ConversationMuteIconSize,
    );

    var _rightArea = <Widget>[
      Text(
        conversation.updateAt,
        textAlign: TextAlign.center,
        style: AppStyles.DeseStyle,
      ),
      Container(
        height: 8.0,
      )
    ];
    // 判断当前是否为勿扰模式
    if (conversation.isMute) {
      _rightArea.add(muteIcon);
    } else {
      _rightArea.add(Container(
        width: Constants.ConversationMuteIconSize,
        height: Constants.ConversationMuteIconSize,
      ));
    }

    return Material(
      child: InkWell(
        onTap: () {
          print('打开会话：${conversation.title},${conversation.avatar}');
          // 传递路由数据
          Navigator.pushNamed(
            context,
            Routes.Conversation,
            arguments: ConversationDetailArgs(
                title: conversation.title, avatar: conversation.avatar),
          );
        },
        child: Container(
          decoration: BoxDecoration(
              color: Color(AppColors.AppBarPopupMenuTextColor),
              border: Border(
                  bottom: BorderSide(
                color: Color(AppColors.DividerColor),
                width: Constants.DividerWidth,
              ))),
          padding: EdgeInsets.all(10.0),
          child: Row(
            // 主轴居中
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              avatarContainer,
              Container(
                width: 10.0,
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 18.0,
                      child: Text(
                        conversation.title,
                        style: AppStyles.TitlteStyle,
                      ),
                    ),
                    Container(
                      height: 5.0,
                    ),
                    Text(
                      conversation.des,
                      style: AppStyles.DeseStyle,
                    ),
                  ],
                ),
              ),
              Column(
                children: _rightArea,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ConversationPage extends StatefulWidget {
  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {
  final ConversationPageData data = ConversationPageData.mock();

  @override
  Widget build(BuildContext context) {
    var mockConversations = data.conversations;
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        // 在会议列表顶部创建新item
        // if (index == 0) {
        //   return Container(
        //     height: 30.0,
        //     color: Colors.blue,
        //   );
        // }
        return _ConversationItem(
          conversation: mockConversations[index],
        );
      }, //回调方法
      itemCount: mockConversations.length,
    );
  }
}
